<template>
  <view class="container">
    <u-popup v-if="show" :show="show" @close="handelClose" :round="10" mode="center">
      <view class="user-con">
        <view class="applyfor-tit">
          编辑信息
        </view>
        <scroll-view scroll-y="true" style="height: 100%;">
        <u-form labelPosition="left" labelWidth="60px" :model="formData" ref="refFrom">
          <view class="form-info">
            <u-form-item label="手机号" required>
              <uni-easyinput placeholder="请输入" type="number" clearable v-model="formData.phone">

              </uni-easyinput>
            </u-form-item>


            <u-form-item label="姓名" required>
              <uni-easyinput placeholder="请输入" clearable v-model="formData.nickName">

              </uni-easyinput>
            </u-form-item>
            <u-form-item label="性别">
              <u-radio-group v-model="formData.sex">
                <u-radio :customStyle="{ marginRight: '8px' }" label="未知" :name="3" />
                <u-radio :customStyle="{ marginRight: '8px' }" label="男" :name="1" />
                <u-radio label="女" :name="0" />
              </u-radio-group>
            </u-form-item>
            <u-form-item label="生日" >
              <uni-datetime-picker type="date" :clear-icon="false" v-model="formData.birthday" />
            </u-form-item>
            <u-form-item label="备注">
              <u-textarea v-model="formData.description" :placeholder="'请输入备注'" :maxlength="200" :rows="5"
                :autosize="true" count></u-textarea>

            </u-form-item>
            <u-form-item label="状态" required>
              <u-radio-group v-model="formData.status">
                <u-radio :customStyle="{ marginRight: '8px' }" label="正常" name="0" />
                <u-radio label="锁定" name="1" />
              </u-radio-group>
            </u-form-item>
          </view>
        </u-form>


        <view class="button-group">
          <button class="cancel-btn" @click="handelClose">取消</button>
          <button class="pay-btn" @click="handelSure">确定</button>
        </view>
         </scroll-view>
      </view>
    </u-popup>
  </view>
</template>

<script setup>
  import {
    ref,
    nextTick,
    computed,
    onMounted,
    watch,
    defineEmits
  } from 'vue'
  import {
    getBySpuId,
    addCartFun
  } from '@/requests/apis/takeOrder'
  const quantity = ref(1)
  const current = ref(0)
  const emit = defineEmits(['closePopup', 'surePopup'])
  const props = defineProps({
    showPopup: Boolean,
    detailInfo: Object,
  })
  let show = ref(props.showPopup)
  let formData = ref({
    sex: 3,
    status: 1,
  })
watch(props, (newProps, oldProps) => {
  console.log('旧值：', oldProps, '新值：', newProps.detailInfo); // 推荐打印新旧值对比
  if (newProps.detailInfo) {
    formData.value.phone = newProps.detailInfo.phone;
    formData.value.nickName = newProps.detailInfo.nickName;
    formData.value.status = newProps.detailInfo.status;
    formData.value.userId = newProps.detailInfo.userId;
  }
}, {
  deep: true,
  immediate: true // 新增：初始挂载时就执行一次
});
  const handelClose = () => {
    show.value = false;
    emit('closePopup')
  }

  const handelSure = () => {
    console.log(formData.value)
    const valid = [
      {
        k: 'phone',
        err: '请输入手机号',
        validate: (value) => {
          const phoneReg = /^1[3-9]\d{9}$/;
          return phoneReg.test(value.trim());
        },
        validateErr: '请输入正确的手机号'
      },
      {
        k: 'nickName',
        err: '请输入姓名',
      }
    ]

    let err = ''

    for (let item of valid) {
      if (!formData.value[item.k] && formData.value[item.k] !== 0) {
        err = item.err
        break
      }
      if (item.validate && !item.validate(formData.value[item.k])) {
        err = item.validateErr
        break
      }
    }
    if (err) {
      uni.showToast({
        title: err,
        icon: 'none',
        duration: 2000,
      })
    } else {
      show.value = false;
      emit('surePopup')
    }
  }
  // 页面初始化时读取本地存储并设置选中状态
  onMounted(async () => {

  });
</script>

<style lang="scss">
  .user-con {
    background: linear-gradient(180deg, #E3F8FF 0%, #FFFFFF 100%);
    box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.04);
    border-radius: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 50vw;

    .applyfor-tit {
      font-weight: 500;
      font-size: 16px;
      color: #333333;
      text-align: center;
      padding-top: 30px;
      padding-bottom: 17px;
      box-sizing: border-box;
    }

    .form-info {
      margin: 0 50px;
    }

    .button-group {
      display: flex;
      padding: 0 100px 20px;
      box-sizing: border-box;
      margin-top: 30px;


      .cancel-btn {
        flex: 1;
        height: 40px;
        line-height: 40px;
        background: #EFEFEF;
        border-radius: 21px;
        margin-right: 30rpx;
        font-weight: 400;
        font-size: 14px;
        color: #222222;

        &::after {
          content: " ";
          border: none;
        }
      }

      .pay-btn {
        flex: 1;
        height: 40px;
        line-height: 40px;
        background: #0F90FD;
        border-radius: 21px;
        font-weight: 400;
        font-size: 14px;
        color: #fff;

        &::after {
          content: " ";
          border: none;
        }
      }
    }
  }
</style>
